<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">




<script>
    (function(){
        if(''){
            if (prompt('请输入文章密码') !== ''){
                alert('密码错误！');
                history.back();
            }
        }
    })();
  </script>






<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css" />



  <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico?v=5.1.4">







  <meta name="keywords" content="iOS," />





  <link rel="alternate" href="/atom.xml" title="Swift社区" type="application/atom+xml" />






<meta name="description" content="介绍早在 2020 年，我们就拥有了在 SwiftUI（LazyVGrid 和 LazyHGrid）中绘制网格的新视图控件。两年后，我们又获得了另一种在网格（Grid）中显示视图的视图控件。但是，这些新增功能非常不同，不仅在您使用它的方式上，而且在它内部的行为方式上。 2020 年的观点很懒惰。这些新人很热心。">
<meta name="keywords" content="iOS">
<meta property="og:type" content="article">
<meta property="og:title" content="使用 SwiftUI 的 Eager Grids">
<meta property="og:url" content="https://fanbaoying.github.io/使用-SwiftUI-的-Eager-Grids/index.html">
<meta property="og:site_name" content="Swift社区">
<meta property="og:description" content="介绍早在 2020 年，我们就拥有了在 SwiftUI（LazyVGrid 和 LazyHGrid）中绘制网格的新视图控件。两年后，我们又获得了另一种在网格（Grid）中显示视图的视图控件。但是，这些新增功能非常不同，不仅在您使用它的方式上，而且在它内部的行为方式上。 2020 年的观点很懒惰。这些新人很热心。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-group.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-hstack.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-nocontainer.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-foreach.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-first-grid.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-spacing.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-widths.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-parent.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-unsized.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-grid-alignment.gif">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-row-alignment-1.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-column-alignment.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-cell-alignment.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-text-alignment.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-divider.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-spanning.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-ambiguity1.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-ambiguity2.png">
<meta property="og:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-hexagon.png">
<meta property="og:updated_time" content="2022-09-26T03:58:30.202Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="使用 SwiftUI 的 Eager Grids">
<meta name="twitter:description" content="介绍早在 2020 年，我们就拥有了在 SwiftUI（LazyVGrid 和 LazyHGrid）中绘制网格的新视图控件。两年后，我们又获得了另一种在网格（Grid）中显示视图的视图控件。但是，这些新增功能非常不同，不仅在您使用它的方式上，而且在它内部的行为方式上。 2020 年的观点很懒惰。这些新人很热心。">
<meta name="twitter:image" content="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-group.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://fanbaoying.github.io/使用-SwiftUI-的-Eager-Grids/"/>





  <title>使用 SwiftUI 的 Eager Grids | Swift社区</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>
    
    <a href="https://github.com/SwiftCommunityRes" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
    
    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Swift社区</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">做最好的 Swift 社区</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://fanbaoying.github.io/使用-SwiftUI-的-Eager-Grids/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Swift社区">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="https://avatars.githubusercontent.com/u/84354365?v=4">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Swift社区">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">使用 SwiftUI 的 Eager Grids</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2022-09-26T11:56:08+08:00">
                2022-09-26
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/SwiftUI/" itemprop="url" rel="index">
                    <span itemprop="name">SwiftUI</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>

                <!-- 
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                -->
                <span title="字数统计">
                  数字统计 5,562字
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>

                <!-- 
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                --> 

                <span title="阅读时长">
                  阅读时长 25分钟
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h2 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h2><p>早在 2020 年，我们就拥有了在 SwiftUI（LazyVGrid 和 LazyHGrid）中绘制网格的新视图控件。两年后，我们又获得了另一种在网格（Grid）中显示视图的视图控件。但是，这些新增功能非常不同，不仅在您使用它的方式上，而且在它内部的行为方式上。 2020 年的观点很懒惰。这些新人很热心。</p>
<a id="more"></a>
<p><code>lazy grids</code>不会渲染甚至实例化屏幕外的视图。单元格视图仅在它们被滚动时创建，并且在它们滚动时停止计算。</p>
<p>这篇文章的主题 Eager Grids 正好相反。 SwiftUI 不在乎它们是在屏幕上还是在屏幕外。所有视图都被同等对待。这可能会出现大量单元的性能问题。然而，多少是一个很大的数字是一个不可能回答的问题。这将取决于您的单元格视图的复杂性。</p>
<p>所以如果<code>lazy grids</code>表现更好，这就引出了一个问题，我为什么要使用<code>Eager Grids</code>？事实是，<code>Eager Grids</code>比<code>lazy grids</code>更有优势，反之亦然。例如，<code>Eager Grids</code>支持列跨越，而<code>lazy grids</code>不支持。归根结底，性能并不是唯一需要考虑的因素。在本文中，我们将探索这些新网格，以便您在选择其中一个时做出明智的决定。</p>
<h2 id="关于容器视图的一句话"><a href="#关于容器视图的一句话" class="headerlink" title="关于容器视图的一句话"></a>关于容器视图的一句话</h2><p>在我们开始探索 Grid 视图之前，让我先谈谈容器视图。也就是说，接收视图构建器并以特定方式呈现其内容的视图（HStack、VStack、ZStack、Lazy*Grid、Group、List、ForEach 等）。请耐心等待，这将在以后有所帮助。</p>
<p>有两种类型的容器视图。我认为这些类型没有正式名称。我只会称它们为“有布局的容器”和“没有布局的容器”。用几个例子可以更好地解释这一点：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-group.png" alt="eagergrids-group"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        </span><br><span class="line">        <span class="type">HStack</span> &#123;</span><br><span class="line">            <span class="type">Group</span> &#123;</span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Hello"</span>)</span><br><span class="line">                <span class="type">Text</span>(<span class="string">"World"</span>)</span><br><span class="line">                <span class="type">Image</span>(systemName: <span class="string">"network"</span>)</span><br><span class="line">            &#125;</span><br><span class="line">            .padding(<span class="number">10</span>)</span><br><span class="line">            .border(.red)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>同样可以这么写:</p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        </span><br><span class="line">        <span class="type">HStack</span> &#123;</span><br><span class="line">            <span class="type">Text</span>(<span class="string">"Hello"</span>)</span><br><span class="line">                .padding(<span class="number">10</span>)</span><br><span class="line">                .border(.red)</span><br><span class="line">            </span><br><span class="line">            <span class="type">Text</span>(<span class="string">"World"</span>)</span><br><span class="line">                .padding(<span class="number">10</span>)</span><br><span class="line">                .border(.red)</span><br><span class="line">            </span><br><span class="line">            <span class="type">Image</span>(systemName: <span class="string">"network"</span>)</span><br><span class="line">                .padding(<span class="number">10</span>)</span><br><span class="line">                .border(.red)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>从示例中可以看出，Group 修饰符分别应用于每个包含的视图。此外，Group 视图本身没有提供任何布局，也没有任何自己的几何图形。所有布局都由其父级执行：HStack。</p>
<p>但是，具有布局的容器（例如 HStack）上的修饰符应用于容器，该容器确实具有自己的几何形状：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-hstack.png" alt="eagergrids-hstack"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        </span><br><span class="line">        <span class="type">HStack</span> &#123;</span><br><span class="line">            <span class="type">Text</span>(<span class="string">"Hello"</span>)</span><br><span class="line">            <span class="type">Text</span>(<span class="string">"World"</span>)</span><br><span class="line">            <span class="type">Image</span>(systemName: <span class="string">"network"</span>)</span><br><span class="line">        &#125;</span><br><span class="line">        .padding(<span class="number">10</span>)</span><br><span class="line">        .border(.red)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>您可能会问，当 Group 没有父级时会发生什么。这不是问题。当没有布局容器存在时，SwiftUI 会隐式使用 VStack。这就是为什么这也有效：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-nocontainer.png" alt="eagergrids-nocontainer"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;        </span><br><span class="line">        <span class="type">Text</span>(<span class="string">"Hello"</span>)</span><br><span class="line">        <span class="type">Text</span>(<span class="string">"World"</span>)</span><br><span class="line">        <span class="type">Image</span>(systemName: <span class="string">"network"</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>另一个没有布局的容器示例是 <code>ForEach</code>：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-foreach.png" alt="eagergrids-foreach"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        </span><br><span class="line">        <span class="type">HStack</span> &#123;</span><br><span class="line">            <span class="type">ForEach</span>(<span class="number">0</span>..&lt;<span class="number">5</span>) &#123; idx <span class="keyword">in</span></span><br><span class="line">                <span class="type">Text</span>(<span class="string">"<span class="subst">\(idx)</span>"</span>)</span><br><span class="line">            &#125;</span><br><span class="line">            .padding(<span class="number">10</span>)</span><br><span class="line">            .border(.blue)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这与网格有什么关系？我们将在下一节中找到答案。</p>
<h2 id="我们的第一个网格"><a href="#我们的第一个网格" class="headerlink" title="我们的第一个网格"></a>我们的第一个网格</h2><p>让我们建立我们的第一个网格。语法非常简单。您使用 Grid 容器视图，然后通过对 GridRow 容器内的单元格视图进行分组来定义其行。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-first-grid.png" alt="eagergrids-first-grid"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        <span class="type">Grid</span> &#123;</span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #1"</span>)</span><br><span class="line">                    .padding(<span class="number">20</span>)</span><br><span class="line">                    .border(.red)</span><br><span class="line"></span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #2"</span>)</span><br><span class="line">                    .padding(<span class="number">20</span>)</span><br><span class="line">                    .border(.red)</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #3"</span>)</span><br><span class="line">                    .padding(<span class="number">20</span>)</span><br><span class="line">                    .border(.green)</span><br><span class="line"></span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #4"</span>)</span><br><span class="line">                    .padding(<span class="number">20</span>)</span><br><span class="line">                    .border(.green)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        .padding(<span class="number">10</span>)</span><br><span class="line">        .border(.blue)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这就是我们谈论容器的地方。如果我告诉你 Grid 是一个带有布局的容器，但 GridRow 不是。这意味着我们可以重写我们的代码并获得相同的结果：</p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        <span class="type">Grid</span> &#123;</span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #1"</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #2"</span>)</span><br><span class="line">            &#125;</span><br><span class="line">            .padding(<span class="number">20</span>)</span><br><span class="line">            .border(.red)</span><br><span class="line"></span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #3"</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">Text</span>(<span class="string">"Cell #4"</span>)</span><br><span class="line">            &#125;</span><br><span class="line">            .padding(<span class="number">20</span>)</span><br><span class="line">            .border(.green)</span><br><span class="line">        &#125;</span><br><span class="line">        .padding(<span class="number">10</span>)</span><br><span class="line">        .border(.blue)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>请注意，并非所有行都具有相同数量的单元格。尽管这里的大多数示例都可以，但每一行可以包含任意数量的单元格。</p>
<h2 id="探索网格选项"><a href="#探索网格选项" class="headerlink" title="探索网格选项"></a>探索网格选项</h2><p>在以下部分中，我们将探讨不同的网格大小、对齐和跨越选项。但为了让事情变得更容易，我创建了一个名为 Grid Trainer 的小应用程序。该应用程序可让您以交互方式使用所有这些网格参数。当您更改网格时，该应用程序还将向您显示生成您创建的网格的代码。</p>
<p>整个应用程序位于一个 swift 文件中，因此只需几秒钟即可完成设置。只需创建一个新的 Xcode 项目，将 ContentView.swift 文件替换为此 gist 文件中的文件，就可以开始了。请注意，虽然我在设计应用程序时主要考虑了 macOS，但该应用程序在 iPad 上也能流畅运行。无需更改。</p>
<p>当您阅读以下部分时，最好运行 Grid Trainer 应用程序并测试您对网格的理解。试着看看你是否可以预测当你改变参数时网格会做什么。每次你得到你所期望的不同结果时，你都会学到一些关于网格的新东西。如果你得到你所期望的，你会重申你已经知道的。</p>
<h3 id="空间"><a href="#空间" class="headerlink" title="空间"></a>空间</h3><p>与 HStack 和 VStack 类似，Grid 容器具有用于间距的垂直和水平参数。如果未指定，则将使用系统默认值。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-spacing.png" alt="eagergrids-spacing"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span>(horizontalSpacing: <span class="number">5.0</span>, verticalSpacing: <span class="number">15.0</span>) &#123;</span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.20</span>).gradient)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.40</span>).gradient)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.60</span>).gradient)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.80</span>).gradient)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">    </span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.80</span>).gradient)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.60</span>).gradient)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.40</span>).gradient)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.20</span>).gradient)</span><br><span class="line">    &#125;</span><br><span class="line">    .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="列宽，行高"><a href="#列宽，行高" class="headerlink" title="列宽，行高"></a>列宽，行高</h3><p>网格中的单元格是视图，视图会适应父级提供的大小。在这种情况下，父级是网格。通常，列与其中最宽的单元格一样宽。在下面的示例中，橙色列的宽度由第二行中最宽的单元格决定。身高也是如此。在示例中，第二行与行中最高的紫色单元格一样高。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-widths.png" alt="eagergrids-widths"></p>
<h3 id="未定义大小的单元"><a href="#未定义大小的单元" class="headerlink" title="未定义大小的单元"></a>未定义大小的单元</h3><p>默认情况下，网格将为单元格提供尽可能多的空间。那么如果一个网格是由一个 Rectangle() 视图组成的，会发生什么呢？如您所知，没有框架修饰符的形状喜欢增长以填充父级提供的所有空间。在这种情况下，网格将增长以填充其父级提供的所有空间。</p>
<p>在下面的示例中，绿色单元格在其水平维度上不受限制，因此它使用了所有可用空间。网格尽可能地增长，绿色单元格填充空间。然而，蓝色单元格被框架修改器限制为 50.0 pt 宽度。虚线表示网格边界。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-parent.png" alt="eagergrids-parent"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> dash = <span class="type">StrokeStyle</span>(lineWidth: <span class="number">1.0</span>, lineCap: .round, lineJoin: .miter, dash: [<span class="number">5</span>, <span class="number">5</span>], dashPhase: <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line"></span><br><span class="line">        <span class="type">HStack</span>(spacing: <span class="number">0</span>) &#123;</span><br><span class="line">            <span class="type">Circle</span>().fill(.yellow).frame(width: <span class="number">30</span>, height: <span class="number">30</span>)</span><br><span class="line">            </span><br><span class="line">            <span class="type">Grid</span>(horizontalSpacing: <span class="number">0</span>) &#123;</span><br><span class="line">                <span class="type">GridRow</span> &#123;</span><br><span class="line">                    <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">15.0</span>)</span><br><span class="line">                        .fill(.green.gradient)</span><br><span class="line">                        .frame(height: <span class="number">50</span>)</span><br><span class="line">                    </span><br><span class="line">                    <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">15.0</span>)</span><br><span class="line">                        .fill(.blue.gradient)</span><br><span class="line">                        .frame(width: <span class="number">50</span>, height: <span class="number">50</span>)</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            .overlay &#123; <span class="type">Rectangle</span>().stroke(style: dash) &#125;</span><br><span class="line"></span><br><span class="line">            <span class="type">Circle</span>().fill(.yellow).frame(width: <span class="number">30</span>, height: <span class="number">30</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>到目前为止，没有什么太令人惊讶的。这与我们从使用 HStack 容器的第一天起就看到的行为相同。但是，Grids 在这里为我们提供了一个选择。我们可以让单元格避免让网格增长以获得额外的空间。例如，对于水平维度，单元格只会增长到与其列中最宽的单元格一样多的空间。这样的单元格在确定列宽方面没有任何作用。这是通过应用于相关单元格的 gridCellUnsizedAxes() 修饰符来完成的。它接收一个 Axis.Set 值。它可以是 .horizontal、.vertical 或两者的组合：[.horizontal, .vertical]。这告诉网格给定单元格选择不要求额外空间的维度。</p>
<p>如果您还没有，现在是开始使用 Grid Trainer 应用程序并挑战您迄今为止的知识的好时机。</p>
<p>在下面的示例中，红色单元格在水平轴上未调整大小，使其仅与绿色单元格一样大。即使父母提供更多，红细胞也不会接受。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-unsized.png" alt="eagergrids-unsized"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span> &#123;</span><br><span class="line">  <span class="type">GridRow</span> &#123;</span><br><span class="line">    <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>)</span><br><span class="line">      .fill(.green.gradient)</span><br><span class="line">      .frame(width: <span class="number">160.0</span>, height: <span class="number">80.0</span>)</span><br><span class="line"></span><br><span class="line">    <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>)</span><br><span class="line">      .fill(.blue.gradient)</span><br><span class="line">      .frame(width: <span class="number">80.0</span>, height: <span class="number">80.0</span>)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="type">GridRow</span> &#123;</span><br><span class="line">    <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>)</span><br><span class="line">      .fill(.red.gradient)</span><br><span class="line">      .frame(height: <span class="number">80.0</span>)</span><br><span class="line">      .gridCellUnsizedAxes(.horizontal)</span><br><span class="line"></span><br><span class="line">    <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>)</span><br><span class="line">      .fill(.yellow.gradient)</span><br><span class="line">      .frame(width: <span class="number">80.0</span>, height: <span class="number">80.0</span>)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="对齐路线"><a href="#对齐路线" class="headerlink" title="对齐路线"></a>对齐路线</h3><h4 id="网格对齐"><a href="#网格对齐" class="headerlink" title="网格对齐"></a>网格对齐</h4><p>当单元格的视图小于可用空间时，对齐方式将取决于几个参数。第一个要考虑的参数是 Grid(alignment: Alignment)。它影响网格中的所有单元格，除非被下一个参数之一覆盖。如果未指定，则默认为 .center。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-grid-alignment.gif" alt="eagergrid-grid-alignment"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span>(alignment: .topLeading) &#123;</span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(.yellow.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="type">Rectangle</span>().fill(.green.gradient)</span><br><span class="line">            .frame(width: <span class="number">100.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(.orange.gradient)</span><br><span class="line">            .frame(width: <span class="number">100.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(.red.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="行垂直对齐"><a href="#行垂直对齐" class="headerlink" title="行垂直对齐"></a>行垂直对齐</h4><p>您还可以使用 GridRow(alignment: VerticalAlignment) 指定行对齐方式。请注意，在这种情况下，对齐方式只是垂直的。此行中的单元格将结合 Grid 参数和 GridRow 参数。行的垂直对齐将优先于对齐的网格垂直组件。在下面的示例中，具有 .topTrailing 值的网格与 .bottom 垂直行值相结合，会导致第二行中的单元格以 .bottomTrailing 对齐。其他行将使用网格对齐方式（即 .topTrailing）。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-row-alignment-1.png" alt="eagergrid-row-alignment-1"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span>(alignment: .topTrailing) &#123;</span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.25</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">120.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.50</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.50</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">120.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="type">GridRow</span>(alignment: .bottom) &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.25</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">120.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.50</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.50</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.25</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">120.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.50</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">120.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(<span class="type">Color</span>(white: <span class="number">0.50</span>).gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="列水平对齐"><a href="#列水平对齐" class="headerlink" title="列水平对齐"></a>列水平对齐</h4><p>除了指定垂直行对齐方式外，您还可以指定列水平对齐方式。与行对齐的情况一样，该值将与行垂直值和网格的对齐值合并。您使用修饰符 gridColumnAlignment() 指示列的对齐方式</p>
<p>注意：文档非常清楚。 gridColumnAlignment 只能在每列一个单元格中使用。否则行为未定义。</p>
<p>在以下示例中，您可以看到所有对齐组合：</p>
<p>单元格 (1,1)：对齐顶部前导。 （网格对齐）<br>单元格 (1, 2)：对齐的 topTrailing。 （网格对齐+列对齐）<br>单元格（2,1）：对齐的底部前导（网格对齐+行对齐）<br>单元格 (2,2)：对齐的底部尾随（网格对齐 + 行对齐 + 列对齐）</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-column-alignment.png" alt="eagergrids-column-alignment"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        <span class="type">Grid</span>(alignment: .topLeading, horizontalSpacing: <span class="number">5.0</span>, verticalSpacing: <span class="number">5.0</span>) &#123;</span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">CellView</span>(color: .green, width: <span class="number">80</span>, height: <span class="number">80</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(color: .yellow, width: <span class="number">80</span>, height: <span class="number">80</span>)</span><br><span class="line">                    .gridColumnAlignment(.trailing)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(color: .orange, width: <span class="number">80</span>, height: <span class="number">120</span>)</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="type">GridRow</span>(alignment: .bottom) &#123;</span><br><span class="line">                <span class="type">CellView</span>(color: .green, width: <span class="number">80</span>, height: <span class="number">80</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(color: .yellow, width: <span class="number">80</span>, height: <span class="number">80</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(color: .orange, width: <span class="number">80</span>, height: <span class="number">120</span>)</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">CellView</span>(color: .green, width: <span class="number">120</span>, height: <span class="number">80</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(color: .yellow, width: <span class="number">120</span>, height: <span class="number">80</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(color: .orange, width: <span class="number">80</span>, height: <span class="number">80</span>)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="class"><span class="keyword">struct</span> <span class="title">CellView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">        <span class="keyword">let</span> color: <span class="type">Color</span></span><br><span class="line">        <span class="keyword">let</span> width: <span class="type">CGFloat</span></span><br><span class="line">        <span class="keyword">let</span> height: <span class="type">CGFloat</span></span><br><span class="line">        </span><br><span class="line">        <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">            <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>)</span><br><span class="line">                .fill(color.gradient)</span><br><span class="line">                .frame(width: width, height: height)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="单元格对齐"><a href="#单元格对齐" class="headerlink" title="单元格对齐"></a>单元格对齐</h4><p>最后，您还可以使用 .gridCellAnchor(_: anchor: UnitPoint) 修饰符为单元格指定单独的对齐方式。此对齐方式将覆盖给定单元格的任何网格、列和行对齐方式。注意参数类型不是Alignment，而是UnitPoint。这意味着除了使用预定义的点 .topLeading、.center 等之外，您还可以创建任意点，例如 UnitPoint(x: 0.25, y: 0.75)：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-cell-alignment.png" alt="eagergrid-cell-alignment"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span>(alignment: .topTrailing) &#123;</span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(.green.gradient)</span><br><span class="line">            .frame(width: <span class="number">120.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(.blue.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">            .gridCellAnchor(<span class="type">UnitPoint</span>(x: <span class="number">0.25</span>, y: <span class="number">0.75</span>))</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Rectangle</span>().fill(.blue.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line"></span><br><span class="line">        <span class="type">Rectangle</span>().fill(.green.gradient)</span><br><span class="line">            .frame(width: <span class="number">120.0</span>, height: <span class="number">100.0</span>)</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="文本基线对齐"><a href="#文本基线对齐" class="headerlink" title="文本基线对齐"></a>文本基线对齐</h4><p>除了常见的对齐方式，请记住您还可以使用文本基线对齐方式。对于 Grid 和 GridRow：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-text-alignment.png" alt="eagergrid-text-alignment"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span>(alignment: .centerFirstTextBaseline) &#123;</span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">Text</span>(<span class="string">"Align"</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="type">Rectangle</span>()</span><br><span class="line">            .fill(.green.gradient.opacity(<span class="number">0.7</span>))</span><br><span class="line">            .frame(width: <span class="number">50</span>, height: <span class="number">50</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">.font(.system(size: <span class="number">36</span>))</span><br></pre></td></tr></table></figure>
<h4 id="没有-GridRow-的行"><a href="#没有-GridRow-的行" class="headerlink" title="没有 GridRow 的行"></a>没有 GridRow 的行</h4><p>如果 Grid 在 GridRow 容器之外有一个视图，则它被用作跨越所有列的单个单元格行。这种类型的单元格的常见用途是创建分隔符。例如，您可以使用 Divider() 视图，或者更复杂的视图，如下例所示。请注意，我们通常不希望分隔线使网格增长到最大值，因此我们使视图在水平轴上未调整大小。这将使分隔线与最宽的行一样宽，但不会更宽。</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-divider.png" alt="eagergrid-divider"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span>(horizontalSpacing: <span class="number">5.0</span>, verticalSpacing: <span class="number">5.0</span>) &#123;</span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.green.gradient)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.purple.gradient)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.blue.gradient)</span><br><span class="line">    &#125;</span><br><span class="line">    .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line"></span><br><span class="line">    <span class="type">Rectangle</span>()</span><br><span class="line">        .fill(<span class="type">LinearGradient</span>(colors: [.gray, .clear, .gray], startPoint: .leading, endPoint: .trailing))</span><br><span class="line">        .frame(height: <span class="number">2.0</span>)</span><br><span class="line">        .gridCellUnsizedAxes(.horizontal)</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.green.gradient)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.purple.gradient)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.blue.gradient)</span><br><span class="line">    &#125;</span><br><span class="line">    .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="列跨越"><a href="#列跨越" class="headerlink" title="列跨越"></a>列跨越</h4><p><code>Eager Grids</code>优于<code>Lazy Grids</code>的优点之一是所有单元几何形状始终是已知的。这使得有一个跨越多列的单元格成为可能。要将单元格配置为跨越，请使用 .gridCellColumns(_ count: Int)</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-spanning.png" alt="eagergrid-spanning"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">Grid</span> &#123;</span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.green.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.yellow.gradient)</span><br><span class="line">            .frame(height: <span class="number">50.0</span>)</span><br><span class="line">            .gridCellColumns(<span class="number">3</span>)</span><br><span class="line">            .gridCellUnsizedAxes(.horizontal)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.purple.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="type">GridRow</span> &#123;</span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.green.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.yellow.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.orange.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.red.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">        </span><br><span class="line">        <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>).fill(.purple.gradient)</span><br><span class="line">            .frame(width: <span class="number">50.0</span>, height: <span class="number">50.0</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="注意歧义"><a href="#注意歧义" class="headerlink" title="注意歧义"></a>注意歧义</h4><p>考虑以下示例。我们每行有 4 个单元格。除了第一行的第二个单元格和第二行的第三个单元格之外，每个单元格都是 50.0 pt 宽。这些将尽可能地增长（不扩大网格）。这两个单元格也分别跨越两列。</p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        <span class="type">Grid</span>(horizontalSpacing: <span class="number">20.0</span>, verticalSpacing: <span class="number">20.0</span>) &#123;</span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">CellView</span>(width: <span class="number">50.0</span>, color: .green)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(color: .purple)</span><br><span class="line">                    .gridCellColumns(<span class="number">2</span>)</span><br><span class="line">                </span><br><span class="line">                <span class="type">CellView</span>(width: <span class="number">50.0</span>, color: .blue)</span><br><span class="line">                </span><br><span class="line">                <span class="type">CellView</span>(width: <span class="number">50.0</span>, color: .yellow)</span><br><span class="line">            &#125;</span><br><span class="line">            .gridCellUnsizedAxes([.horizontal, .vertical])</span><br><span class="line"></span><br><span class="line">            <span class="type">GridRow</span> &#123;</span><br><span class="line">                <span class="type">CellView</span>(width: <span class="number">50.0</span>, color: .green)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(width: <span class="number">50.0</span>, color: .purple)</span><br><span class="line">                </span><br><span class="line">                <span class="type">CellView</span>(color: .blue)</span><br><span class="line">                    .gridCellColumns(<span class="number">2</span>)</span><br><span class="line"></span><br><span class="line">                <span class="type">CellView</span>(width: <span class="number">50.0</span>, color: .yellow)</span><br><span class="line">            &#125;</span><br><span class="line">            .gridCellUnsizedAxes([.horizontal, .vertical])</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="class"><span class="keyword">struct</span> <span class="title">CellView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> width: <span class="type">CGFloat</span>? = <span class="literal">nil</span></span><br><span class="line">        <span class="keyword">let</span> color: <span class="type">Color</span></span><br><span class="line">        </span><br><span class="line">        <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">            <span class="type">RoundedRectangle</span>(cornerRadius: <span class="number">5.0</span>)</span><br><span class="line">                .fill(color.gradient)</span><br><span class="line">                .frame(width: width, height: <span class="number">50.0</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>你认为应该发生什么？如果仔细看，这是“先有鸡还是先有蛋的问题”。如果您查看第一行中的第二个单元格，它应该跨越到以下列。但是第二行中的以下列应该扩展到第三列。那是什么？我们可以满足一个条件或另一个条件，但不能同时满足这两个条件。这是因为第一行查看第二行以确定下一列，而第二行查看第一行以执行相同操作。 SwiftUI 需要以某种方式解决这个问题，如果你运行代码，你会得到以下结果：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-ambiguity1.png" alt="eagergrid-ambiguity1"></p>
<p>为了打破平局，一个简单的解决方案是添加第三行：</p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="type">GridRow</span> &#123;</span><br><span class="line">    <span class="type">CellView</span>(width: <span class="number">50</span>, color: .green)</span><br><span class="line"></span><br><span class="line">    <span class="type">CellView</span>(width: <span class="number">50</span>, color: .purple)</span><br><span class="line"></span><br><span class="line">    <span class="type">CellView</span>(width: <span class="number">50</span>, color: .blue)</span><br><span class="line"></span><br><span class="line">    <span class="type">CellView</span>(width: <span class="number">50</span>, color: .yellow)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>第三排打破平局，这就是它的样子：</p>
<p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrid-ambiguity2.png" alt="eagergrid-ambiguity2"></p>
<p>如果您不需要第三行，则无论如何都可以添加一个，但高度为零。不过，您可能仍需要处理间距。幸运的是，这并不常见，但我会提到以防您遇到这种情况。</p>
<h2 id="蜂窝再访"><a href="#蜂窝再访" class="headerlink" title="蜂窝再访"></a>蜂窝再访</h2><p>在文章 <a href="https://swiftui-lab.com/impossible-grids/" target="_blank" rel="noopener">Impossible Grids</a> 中，我们是否探索了<code>Lazy Grid</code>，我写了一个示例，说明如何使用这些网格来呈现蜂窝中的单元格。创建这样的网格是测试网格可能的极限的好方法，所以我想我会重复这个练习，但这次使用<code>Eager Grids</code>。</p>
<p>此<a href="https://gist.github.com/swiftui-lab/d38440a2281b2e069f81a94baa741073" target="_blank" rel="noopener">gist file</a>中提供了完整的工作网格。如果需要图片来测试代码，可以访问 <a href="https://this-person-does-not-exist.com。您可以下载带有随机面孔的不存在的人的方形图片！它们是人工智能生成的。" target="_blank" rel="noopener">https://this-person-does-not-exist.com。您可以下载带有随机面孔的不存在的人的方形图片！它们是人工智能生成的。</a> 😲 视频中使用的图片来自该网站。</p>
<h3 id="从方形到六边形的步骤"><a href="#从方形到六边形的步骤" class="headerlink" title="从方形到六边形的步骤"></a>从方形到六边形的步骤</h3><p>我们必须从某个地方开始，所以我们将创建一个方形图像网格，然后逐渐添加代码将我们的简单网格转换为蜂窝。</p>
<p>到现在为止，您应该具备实现转换所需的所有知识。我将为您提供一个起点和您需要执行的一系列步骤，以便成功实现转换。但是，如果您没有时间，或者遇到困难，您可以检查上述 gist 文件中的代码。该代码有注释，指示它执行的每个步骤的位置。</p>
<p>请注意，单元格的翻转并不是练习的一部分，但我也将其包含在要点中。</p>
<p>以下视频显示了起点以及它如何变成蜂窝：</p>
<p>步骤#1：我们从方形图片网格开始。<br>步骤#2：六边形没有 1:1 的尺寸比。它的高度等于宽度 * cos(.pi/6)。如果您想知道原因，请查看 Impossible Grids，我在其中解释了原因。<br>步骤#3：用提供的六边形剪裁图像。<br>步骤#4：将偶数行和奇数行移动到相对的两侧。偏移量是六边形宽度的一半 + 网格水平间距。<br>第 5 步：行需要重叠，因此您需要将行高减少到四分之三 (3/4)。为什么是 3/4？，再次检查 Impossible Grids，我解释了原因。<br>第 6 步：要删除空白区域，请剪裁网格边框（或将其放在 ScrollView 中，它会为您进行剪裁）。<br>步骤#7：如果使垂直间距等于水平间距，则单元格将均匀分布。</p>
<h3 id="初始点"><a href="#初始点" class="headerlink" title="初始点"></a>初始点</h3><p>为了让你开始，这里有一些代码。首先，我们需要一些数据：</p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">Person</span> </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> name: <span class="type">String</span></span><br><span class="line">    <span class="keyword">let</span> image: <span class="type">String</span></span><br><span class="line">    <span class="keyword">var</span> color: <span class="type">Color</span> = .accentColor</span><br><span class="line">    <span class="keyword">var</span> flipped: <span class="type">Bool</span> = <span class="literal">false</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">DataModel</span>: <span class="title">ObservableObject</span> </span>&#123;</span><br><span class="line">    <span class="keyword">static</span> <span class="keyword">let</span> people: [<span class="type">Person</span>] = [</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Peter"</span>, image: <span class="string">"image-1"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Carlos"</span>, image: <span class="string">"image-2"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Jennifer"</span>, image: <span class="string">"image-3"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Paul"</span>, image: <span class="string">"image-4"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Charlotte"</span>, image: <span class="string">"image-5"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Thomas"</span>, image: <span class="string">"image-6"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Sophia"</span>, image: <span class="string">"image-7"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Isabella"</span>, image: <span class="string">"image-8"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Ivan"</span>, image: <span class="string">"image-9"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Laura"</span>, image: <span class="string">"image-10"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Scott"</span>, image: <span class="string">"image-11"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Henry"</span>, image: <span class="string">"image-12"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Laura"</span>, image: <span class="string">"image-13"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Abigail"</span>, image: <span class="string">"image-14"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"James"</span>, image: <span class="string">"image-15"</span>),</span><br><span class="line">        <span class="type">Person</span>(name: <span class="string">"Amelia"</span>, image: <span class="string">"image-16"</span>),</span><br><span class="line">    ]</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">static</span> <span class="keyword">let</span> colors: [<span class="type">Color</span>] = [.yellow, .orange, .red, .purple, .blue, .pink, .green, .indigo]</span><br><span class="line"></span><br><span class="line">    @<span class="type">Published</span> <span class="keyword">var</span> rows: [[<span class="type">Person</span>]] = <span class="type">DataModel</span>.buildDemoCells()</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> columns: <span class="type">Int</span> &#123; rows.first?.<span class="built_in">count</span> ?? <span class="number">0</span> &#125;    </span><br><span class="line">    <span class="keyword">var</span> colCount: <span class="type">CGFloat</span> &#123; <span class="type">CGFloat</span>(columns) &#125;</span><br><span class="line">    <span class="keyword">var</span> rowCount: <span class="type">CGFloat</span> &#123; <span class="type">CGFloat</span>(rows.<span class="built_in">count</span>) &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">static</span> <span class="function"><span class="keyword">func</span> <span class="title">buildDemoCells</span><span class="params">()</span></span> -&gt; [[<span class="type">Person</span>]] &#123;</span><br><span class="line">        <span class="keyword">var</span> array = [[<span class="type">Person</span>]]()</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Add 7 rows</span></span><br><span class="line">        <span class="keyword">for</span> r <span class="keyword">in</span> <span class="number">0</span>..&lt;<span class="number">7</span> &#123;</span><br><span class="line">            <span class="keyword">var</span> a = [<span class="type">Person</span>]()</span><br><span class="line"></span><br><span class="line">            <span class="comment">// Add 6 cells per row</span></span><br><span class="line">            <span class="keyword">for</span> <span class="built_in">c</span> <span class="keyword">in</span> <span class="number">0</span>..&lt;<span class="number">6</span> &#123;</span><br><span class="line">                <span class="keyword">let</span> idx = (r*<span class="number">6</span> + <span class="built_in">c</span>)</span><br><span class="line">                <span class="keyword">var</span> person = people[idx % people.<span class="built_in">count</span>]</span><br><span class="line">                person.color = colors[idx % colors.<span class="built_in">count</span>]</span><br><span class="line">                a.append(person)</span><br><span class="line">            &#125;</span><br><span class="line"></span><br><span class="line">            array.append(a)</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> array</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="您还需要一个六边形："><a href="#您还需要一个六边形：" class="headerlink" title="您还需要一个六边形："></a>您还需要一个六边形：</h3><p><img src="https://swiftui-lab.com/wp-content/uploads/2022/07/eagergrids-hexagon.png" alt="eagergrids-hexagon"></p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">HexagonShape</span>: <span class="title">Shape</span> </span>&#123;</span><br><span class="line">    <span class="function"><span class="keyword">func</span> <span class="title">path</span><span class="params">(<span class="keyword">in</span> rect: CGRect)</span></span> -&gt; <span class="type">Path</span> &#123;</span><br><span class="line">        <span class="type">Path</span> &#123; path <span class="keyword">in</span></span><br><span class="line">        </span><br><span class="line">            <span class="keyword">let</span> height = rect.height</span><br><span class="line">            <span class="keyword">let</span> width = rect.height * cos(.pi/<span class="number">6</span>)</span><br><span class="line">            </span><br><span class="line">            <span class="keyword">let</span> h = height / <span class="number">4</span></span><br><span class="line">            <span class="keyword">let</span> w = width / <span class="number">2</span></span><br><span class="line">            </span><br><span class="line">            <span class="keyword">let</span> pt1 = <span class="type">CGPoint</span>(x: rect.midX, y: rect.minY)</span><br><span class="line">            <span class="keyword">let</span> pt2 = <span class="type">CGPoint</span>(x: rect.midX + w, y: h + rect.minY)</span><br><span class="line">            <span class="keyword">let</span> pt3 = <span class="type">CGPoint</span>(x: rect.midX + w, y: h * <span class="number">3</span> + rect.minY)</span><br><span class="line">            <span class="keyword">let</span> pt4 = <span class="type">CGPoint</span>(x: rect.midX, y: rect.maxY)</span><br><span class="line">            <span class="keyword">let</span> pt5 = <span class="type">CGPoint</span>(x: rect.midX - w, y: h * <span class="number">3</span> + rect.minY)</span><br><span class="line">            <span class="keyword">let</span> pt6 = <span class="type">CGPoint</span>(x: rect.midX - w, y: h + rect.minY)</span><br><span class="line">            </span><br><span class="line">            path.addLines([pt1, pt2, pt3, pt4, pt5, pt6])</span><br><span class="line">            </span><br><span class="line">            path.closeSubpath()</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>最后，你开始设置网格:</p>
<figure class="highlight swift"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">struct</span> <span class="title">ContentView</span>: <span class="title">View</span> </span>&#123;</span><br><span class="line">    @<span class="type">StateObject</span> <span class="keyword">private</span> <span class="keyword">var</span> model = <span class="type">DataModel</span>()</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">let</span> cellWidth: <span class="type">CGFloat</span> = <span class="number">100</span></span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">let</span> cellHeight: <span class="type">CGFloat</span> = <span class="number">100</span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> body: some <span class="type">View</span> &#123;</span><br><span class="line">        <span class="type">VStack</span> &#123;</span><br><span class="line">            <span class="type">Grid</span>(alignment: .center, horizontalSpacing: <span class="number">2</span>, verticalSpacing: <span class="number">2</span>) &#123;</span><br><span class="line">                <span class="type">ForEach</span>(model.rows.<span class="built_in">indices</span>, id: \.<span class="keyword">self</span>) &#123; rowIdx <span class="keyword">in</span></span><br><span class="line">                    <span class="type">GridRow</span> &#123;</span><br><span class="line">                        <span class="type">ForEach</span>(model.rows[rowIdx].<span class="built_in">indices</span>, id: \.<span class="keyword">self</span>) &#123; personIdx <span class="keyword">in</span></span><br><span class="line">                            </span><br><span class="line">                            <span class="keyword">let</span> person = model.rows[rowIdx][personIdx]</span><br><span class="line">                            </span><br><span class="line">                            <span class="type">Image</span>(person.image)</span><br><span class="line">                                .resizable()</span><br><span class="line">                                .frame(width: cellWidth, height: cellHeight)</span><br><span class="line">                        &#125;</span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        .frame(maxWidth: .infinity, maxHeight: .infinity)</span><br><span class="line">        .background(<span class="type">Color</span>.white)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="概括"><a href="#概括" class="headerlink" title="概括"></a>概括</h2><p>今年添加的 Grid 视图使用起来非常简单，并且添加到我们已经拥有的现有布局容器视图中。然而，今年还引入了一个新的布局协议，在将我们的视图放置在屏幕上时，它提供了更多的选择。我们将在以后的文章中对此进行探讨。同时，我希望您喜欢这篇文章和 Grid 教练应用程序。</p>

      
    </div>
    
    
    
    

    
      <div>
        <div>
    
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    
</div>

      </div>
    


    
      <div>
        
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="/使用-SwiftUI-的-Eager-Grids/">使用 SwiftUI 的 Eager Grids</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 Swift社区 的个人博客">Swift社区</a></p>
  <p><span>发布时间:</span>2022年09月26日 - 11:09</p>
  <p><span>最后更新:</span>2022年09月26日 - 11:09</p>
  <p><span>原始链接:</span><a href="/使用-SwiftUI-的-Eager-Grids/" title="使用 SwiftUI 的 Eager Grids">https://fanbaoying.github.io/使用-SwiftUI-的-Eager-Grids/</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://fanbaoying.github.io/使用-SwiftUI-的-Eager-Grids/"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
      $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
        });
    });  
</script>

      </div>
    


    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechat.png" alt="Swift社区 微信支付"/>
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.png" alt="Swift社区 支付宝"/>
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/iOS/" rel="tag"><i class="fa fa-tag"></i> iOS</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/LeetCode-80-删除有序数组中的重复项-II/" rel="next" title="LeetCode - 80 删除有序数组中的重复项 II">
                <i class="fa fa-chevron-left"></i> LeetCode - 80 删除有序数组中的重复项 II
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/第三方库并不是必须的/" rel="prev" title="第三方库并不是必须的">
                第三方库并不是必须的 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
        <!-- JiaThis Button BEGIN -->
<div class="jiathis_style">
<span class="jiathis_txt">分享到：</span>
<a class="jiathis_button_fav">收藏夹</a>
<a class="jiathis_button_copy">复制网址</a>
<a class="jiathis_button_email">邮件</a>
<a class="jiathis_button_weixin">微信</a>
<a class="jiathis_button_qzone">QQ空间</a>
<a class="jiathis_button_tqq">腾讯微博</a>
<a class="jiathis_button_douban">豆瓣</a>
<a class="jiathis_button_share">一键分享</a>

<a href="http://www.jiathis.com/share?uid=2140465" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
<a class="jiathis_counter_style"></a>
</div>
<script type="text/javascript" >
var jiathis_config={
  data_track_clickback:true,
  summary:"",
  shortUrl:false,
  hideMore:false
}
</script>
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=" charset="utf-8"></script>
<!-- JiaThis Button END -->
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="https://avatars.githubusercontent.com/u/84354365?v=4"
                alt="Swift社区" />
            
              <p class="site-author-name" itemprop="name">Swift社区</p>
              <p class="site-description motion-element" itemprop="description">我们的使命是做一个最专业最权威的 Swift 中文社区，我们的愿景是希望更多的人学习和使用Swift。我们会分享以 Swift 实战、SwiftUI、Swift 基础为核心的技术干货，不忘初心，牢记使命。</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">187</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">11</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://blog.csdn.net/qq_36478920" target="_blank" title="CSDN">
                      
                        <i class="fa fa-fw fa-heartbeat"></i>CSDN</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://juejin.im/user/5a30d987f265da430d580126" target="_blank" title="掘金">
                      
                        <i class="fa fa-fw fa-spinner"></i>掘金</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/fanbaoying" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.zhihu.com/people/swift-community" target="_blank" title="知乎">
                      
                        <i class="fa fa-fw fa-heartbeat"></i>知乎</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/u/7711465033" target="_blank" title="微博">
                      
                        <i class="fa fa-fw fa-weibo"></i>微博</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzAxNzgzNTgwMw==&action=getalbum&album_id=2024314764775981057" target="_blank" title="公众号">
                      
                        <i class="fa fa-fw fa-heartbeat"></i>公众号</a>
                  </span>
                
            </div>
          

          
          

          
          
            <div class="links-of-blogroll motion-element links-of-blogroll-block">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-link"></i>
                友情链接
              </div>
              <ul class="links-of-blogroll-list">
                
                  <li class="links-of-blogroll-item">
                    <a href="https://github.com/SwiftCommunityRes/SwiftWeekly" title="SwiftWeekly" target="_blank">SwiftWeekly</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://github.com/SwiftCommunityRes/article-ios" title="Article-ios" target="_blank">Article-ios</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://github.com/SwiftCommunityRes/SwiftUI-Book" title="SwiftUI-Book" target="_blank">SwiftUI-Book</a>
                  </li>
                
              </ul>
            </div>
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#介绍"><span class="nav-number">1.</span> <span class="nav-text">介绍</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#关于容器视图的一句话"><span class="nav-number">2.</span> <span class="nav-text">关于容器视图的一句话</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#我们的第一个网格"><span class="nav-number">3.</span> <span class="nav-text">我们的第一个网格</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#探索网格选项"><span class="nav-number">4.</span> <span class="nav-text">探索网格选项</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#空间"><span class="nav-number">4.1.</span> <span class="nav-text">空间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#列宽，行高"><span class="nav-number">4.2.</span> <span class="nav-text">列宽，行高</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#未定义大小的单元"><span class="nav-number">4.3.</span> <span class="nav-text">未定义大小的单元</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#对齐路线"><span class="nav-number">4.4.</span> <span class="nav-text">对齐路线</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#网格对齐"><span class="nav-number">4.4.1.</span> <span class="nav-text">网格对齐</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#行垂直对齐"><span class="nav-number">4.4.2.</span> <span class="nav-text">行垂直对齐</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#列水平对齐"><span class="nav-number">4.4.3.</span> <span class="nav-text">列水平对齐</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#单元格对齐"><span class="nav-number">4.4.4.</span> <span class="nav-text">单元格对齐</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#文本基线对齐"><span class="nav-number">4.4.5.</span> <span class="nav-text">文本基线对齐</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#没有-GridRow-的行"><span class="nav-number">4.4.6.</span> <span class="nav-text">没有 GridRow 的行</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#列跨越"><span class="nav-number">4.4.7.</span> <span class="nav-text">列跨越</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#注意歧义"><span class="nav-number">4.4.8.</span> <span class="nav-text">注意歧义</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#蜂窝再访"><span class="nav-number">5.</span> <span class="nav-text">蜂窝再访</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#从方形到六边形的步骤"><span class="nav-number">5.1.</span> <span class="nav-text">从方形到六边形的步骤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#初始点"><span class="nav-number">5.2.</span> <span class="nav-text">初始点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#您还需要一个六边形："><span class="nav-number">5.3.</span> <span class="nav-text">您还需要一个六边形：</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#概括"><span class="nav-number">6.</span> <span class="nav-text">概括</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2024</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Swift社区</span>

  
</div>

<!-- 
<div class="powered-by">
  <i class="fa fa-user-md">
  </i>
  <span id="busuanzi_container_site_uv">
    已有<span id="busuanzi_value_site_uv"></span>人来访
  </span>

</div>


  <span class="post-meta-divider">|</span>


<div class="powered-by">
  <i class="fa fa-eye"></i>
  <span id="busuanzi_container_site_pv">
      访问量<span id="busuanzi_value_site_pv"></span>次
  </span>
</div>



  <span class="post-meta-divider">|</span>


-->

<div class="theme-info">
  <i class="fa fa-pencil"></i>
  <span class="post-count">博客全站共361.6k字</span>
</div>


<!-- 
  <span class="post-meta-divider">|</span>



  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>



-->

        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
